<!-- 发起沟通 sponsorSee -->
<template>
  <div class="integration">
    <van-nav-bar :title="name[show]" left-arrow border @click-left="onClickLeft"></van-nav-bar>
    <div class="integration-radio" style="height: 1rem;">
      <van-radio-group v-model="show" class="flex">
        <van-radio name="sponsorSee">
          {{name.sponsorSee}}
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? radioIcon.active : radioIcon.normal"
          >
        </van-radio>
        <van-radio name="daily">
          {{name.daily}}
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? radioIcon.active : radioIcon.normal"
          >
        </van-radio>
        <van-radio name="abarbeitung">
          {{name.abarbeitung}}
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? radioIcon.active : radioIcon.normal"
          >
        </van-radio>
        <van-radio name="Progress">
          {{name.Progress}}
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? radioIcon.active : radioIcon.normal"
          >
        </van-radio>
      </van-radio-group>
    </div>
    <component :is="show"></component>
  </div>
</template>

<script type='textecmascript-6'>
import sponsorSee from "@/components/user/sponsorSee"
import daily from "@/components/issue/daily/daily"
import abarbeitung from "@/components/user/abarbeitung"
import Progress from "@/components/issue/Progress/Progress"
export default {
  components: {
    sponsorSee,
    daily,
    abarbeitung,
    Progress
  },
  data() {
    return {
      radioIcon: {
        normal: require("./user_assets/imgs/radio-a.png"),
        active: require("./user_assets/imgs/radio-b.png")
      },
      name: {
        sponsorSee: "沟通协调",
        daily: "风险管理",
        abarbeitung: "整改认证",
        Progress: "进度认证"
      },
      show: "sponsorSee",
      imgData: null
    };
  },
  created() {
      this.imgData = this.$store.getters.integrationImgData
  },
  watch: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  beforeDestroy () {
    this.$store.commit('INTEGRATION_IMG_DATA', {})
  }
};
</script>

<style lang='stylus' scoped rel='stylesheet/stylus'>
@import './user_assets/base.css';

.integration {
  overflow: hidden;

  .integration-radio {
    height: 1rem;

    .van-radio-group {
      height: inherit;

      .van-radio {
        overflow: visible;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        >>>.van-radio__icon {
          height: inherit;

          img {
            width: 30px;
            height: 30px;
            display: block;
          }
        }
        >>>.van-radio__label{
            font-size 120%;
        }
      }
    }
  }

  .container-sponsorSee, .container-daily, .container-abarbeitung {
    height: calc(100% - 1rem);
  }

  .container-daily {
    >>>.wrapper {
      height: calc(100% - 1.173333rem);
      overflow-y: auto;
    }
  }

  .container-abarbeitung {
    >>>.content {
      height: calc(100% - 1.173333rem);
      overflow-y: auto;
    }
  }
}
</style>
